<template>
  <page-view class="page-view" :title="false">
    <div slot="headerContent">
      <a-breadcrumb class="s-breadcrumb">
        <a-breadcrumb-item>部门清算</a-breadcrumb-item>
        <a-breadcrumb-item><nuxt-link
          to="/rating/RatingIndex"
        >工作考核</nuxt-link></a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 查询和其他操作 -->
    <a-card class="s-card">
      <div class="filter">
        <a-form>
          <a-row>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item label="部门">
                <a-select v-model="listQuery.deptId" placeholder="请选择">
                  <a-select-option
                    v-for="item in departmentList"
                    :key="item.deptId"
                    :value="item.deptId"
                  >
                    {{ item.deptName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item label="月份">
                <a-month-picker
                  v-model="listQuery.selectedMonth"
                  :allow-clear="false"
                  placeholder="请选择"
                  @change="onChangeMonth"
                />
              </a-form-item>
            </a-col>
            <a-col :lg="8" />
          </a-row>
          <a-row>
            <a-col :lg="16" :md="24" :sm="24">
              <a-form-item label="职工姓名">
                <a-input
                  v-model="listQuery.name"
                  clearable
                  class="filter-item"
                  placeholder="请输入职工姓名"
                />
              </a-form-item>
            </a-col>

            <a-col :lg="8" :xs="0">
              <a-button type="primary" @click="handleFilter">查找 </a-button>
              <a-button @click="handleReset">重置</a-button>
            </a-col>
          </a-row>
          <!-- 适配小屏幕 -->
          <a-row>
            <a-col :lg="24" :md="24" :sm="24" style="float:left">
              <a-button
                type="primary"
                @click="handleApply"
              ><a-icon type="arrow-up" />
                上报校办
              </a-button>
            </a-col>
          </a-row>
          <a-row>
            <a-col :lg="0" :md="12" :sm="24">
              <a-button type="primary" @click="handleFilter">查找 </a-button>
              <a-button @click="handleReset">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div>
        <!-- 查询结果 -->
        <a-table
          :columns="columns"
          :data-source="list"
          bordered
          size="middle"
          :scroll="{ x: 'calc(900px + 50%)', y: 1200 }"
        >
          <a-input-number id="point1" slot="point1" default-value="0" />
          <a-input-number id="point2" slot="point2" default-value="0" />
          <a-input-number id="point3" slot="point3" default-value="0" />
          <a-input-number
            id="attendanceReducingScore"
            slot="attendanceReducingScore"
            default-value="0"
          />
        </a-table>
        <!-- 分页器 -->
        <div class="pagination-container">
          <a-pagination
            :page-size="listQuery.pageSize"
            :show-total="
              total =>
                `共 ${total} 条记录 第 ${listQuery.page} / ${Math.ceil(
                  total / listQuery.pageSize
                )} 页`
            "
            :current="listQuery.page"
            :total="total"
            hide-on-single-page
            show-quick-jumper
            @change="getList"
          />
        </div>
      </div>
    </a-card>
  </page-view>
</template>
<style lang="less" scoped>
.index-td {
  width: 70px;
}
.textarea-td {
  width: 31%;
}
</style>
<script>
import { STable, PageView } from '@/components'
import { del } from '@/pages/staff/api/staff'
import { mapState } from 'vuex'
import { RatingReport } from '@/pages/attendance/api/attendanceApprovalSetting'

export default {
  name: 'RatingIndex',
  components: {
    STable,
    PageView
  },
  async fetch ({ app, store }) {
    if (!app.$get(store, 'state.basic.deptList.length')) {
      app.$departmentListFunc()
    }
  },
  data () {
    return {
      url: '/admin/rating/salary/page',
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        year: 2020,
        departmentId: 6,
        page: 0,
        month: 1,
        pageSize: 20
      },
      downloadLoading: false,
      columns: [
        {
          title: '2019年1月-小学部考核汇总',
          children: [
            {
              title: '序号',
              dataIndex: 'id',
              key: 'id',
              align: 'center',
              width: 100
            },
            {
              title: '工号',
              dataIndex: 'staffJobNumber',
              key: 'staffJobNumber',
              align: 'center',
              width: 100
            },
            {
              title: '姓名',
              dataIndex: 'staffName',
              key: 'staffName',
              align: 'center',
              width: 100
            },
            {
              title: '教学处',
              dataIndex: 'remark1',
              key: 'remark1',
              align: 'center',
              width: 100
            },
            {
              title: '教学处赋分',
              dataIndex: 'point1',
              key: 'point1',
              align: 'center',
              scopedSlots: { customRender: 'point1' },
              width: 150
            },
            {
              title: '教德处',
              dataIndex: 'remark2',
              key: 'remark2',
              align: 'center',
              width: 100
            },
            {
              title: '教德处赋分',
              dataIndex: 'point2',
              key: 'point2',
              align: 'center',
              scopedSlots: { customRender: 'point2' },
              width: 150
            },
            {
              title: '年级组',
              dataIndex: 'remark3',
              key: 'remark3',
              align: 'center',
              width: 100
            },
            {
              title: '年级组赋分',
              dataIndex: 'point3',
              key: 'point3',
              align: 'center',
              scopedSlots: { customRender: 'point3' },
              width: 150
            },
            {
              title: '考勤扣分',
              dataIndex: 'attendanceReducingScore',
              key: 'attendanceReducingScore',
              align: 'center',
              scopedSlots: { customRender: 'attendanceReducingScore' },
              width: 150
            }
            // {
            //   title: '考核扣分汇总',
            //   dataIndex: 'attendanceReducingScore',
            //   key: 'attendanceReducingScore',
            //   align: 'center',
            //   width: 100
            // }
          ]
        }
      ]
    }
  },
  computed: {
    ...mapState({
      departmentList: state => state.basic.deptList,
      deptMaps: state => state.basic.deptMaps
    })
  },
  watch: {
    $route (t, f) {
      if (this.$get(t, 'name') === 'rating-RatingIndex') {
        this.getList()
      }
    }
  },
  mounted () {
    this.getList()
  },
  beforeUpdate () {
    const oldList = this.list
    const oldColumns = this.columns
    var newColumns = []
    var children = []
    oldList[0]
      ? oldList[0].details.map((e, i) => {
        children.push({
          title: e.name,
          dataIndex: `details[${i}].value`,
          key: e.field,
          align: 'center'
        })
      })
      : null
    var newColumnsindex = {
      title: '考核工资',
      children: children
    }

    console.log(newColumnsindex, '5154')
    newColumns = oldColumns.push(newColumnsindex)
    console.log(newColumns)
  },
  methods: {
    getList (page) {
      this.listQuery.page = page || this.listQuery.page
      this.$fetchList()
    },
    handleFilter () {
      this.listQuery.page = 1
      this.getList()
    },
    handleReset () {
      this.listQuery = {
        page: 1,
        pageSize: 20
      }
      // this.getList()
    },
    handleDownload () {
      window.open('https://jydev.shadowedu.net/oa/2020年03月水电费.xls')
    },
    handleDelete (row) {
      this.$handleBtnClick(del, row.id, '此操作将移除该数据, 是否继续?')
    },
    handleEdit (path) {
      this.$router.push(path)
    },
    onChangeMonth (date, dateString) {
      if (dateString) {
        this.listQuery.month = dateString.split('-')[1]
        this.listQuery.year = dateString.split('-')[0]
      }
    },
    handleApply () {
      this.$handleBtnClick(RatingReport, {
        departmentId: this.listQuery.deptId,
        year: this.listQuery.year,
        month: this.listQuery.month
      })
    }
  }
}
</script>
